<template>
  <div id="comment">
    <p>
      <el-icon style="color: blue;">
        <Notebook/>
      </el-icon>
      <strong>评论记录</strong>
    </p>

    <div v-if="data.comments.length === 0" style="text-align: center;">
      暂无评价信息
    </div>
    <div v-for="i in data.comments" v-if="data.comments.length !== 0"
         style="display: flex;align-items: center;margin:30px 0px;">
      <img :src="pic(i.book.pic)" alt="" style="border-radius: 50%;width: 30px;height: 30px;margin:0px 20px;">
      <div style="display: flex;flex-direction: column;width: 80%;">
        <div style="display: flex;justify-content: space-between;">
          <el-link :underline="false" type="info" @click="findGood(i.book.id)">{{ i.book.name }}</el-link>
          <el-rate v-model="i.rate" disabled show-score text-color="#ff9900"></el-rate>
        </div>
        <div style="display: flex;justify-content: space-between;">
          <span style="font-size: 0.8rem">{{ i.content }}</span>
          <span style="color: #C0C4CC;">{{ dateT(i.tpost) }}</span>
        </div>
      </div>
      <div style="width: 10%;text-align: end">
        <el-button size="mini" type="danger" @click="del(i.id)">删除</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>

import {onMounted, reactive} from 'vue';
import api from '../../api';
import pic from '../../api/pic';
import router from "@/router";
import {ElMessage} from "element-plus";

const data = reactive({
  comments: []
})

const dateT = (str) => {
  let d = new Date(str)
  let year = d.getFullYear();
  let month = String(d.getMonth() + 1).padStart(2, '0');
  let day = String(d.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
}

const findGood = (id) => {
  router.push(`/book?id=${id}`)
}

const del = (id) => {
  api.get(`/api/comment/delete/${id}`).then((resp) => {
    ElMessage.success(resp.data.msg)
    data.comments = resp.data.data
  })
}

onMounted(() => {
  api.get("/api/comment/myComment").then((resp) => {
    data.comments = resp.data.data
  })
})
</script>

<style lang="less" scoped>
#comment {
  p:nth-child(1) {
    display: block;
    height: 30px;
    line-height: 30px;
    border-bottom: 2px solid #b3d8ff;
    text-align: center;
    margin-bottom: 20px;
  }
}
</style>